<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>ms-class</title>
        <style type="text/css">
            .hover{background-color: red;}
        </style>
        <script type="text/javascript" src="../avalon.repeat.js"></script>
        <script>
            var model = avalon.define('test', function(vm) {

                vm.data = {A: [
                        {text: "title1", value: 111111},
                        {text: "title2", value: 222222},
                        {text: "title3", value: 333333}
                    ], B: [
                        {text: "title1", value: 111111},
                        {text: "title2", value: 222222},
                        {text: "title3", value: 333333}
                    ]};
                vm.changeData1 = function() {
                    vm.data = {C: [
                            {text: "changeData1", value: 111111},
                            {text: "changeData2", value: 222222},
                            {text: "changeData3", value: 333333}
                        ], D: [
                            {text: "changeData4", value: 111111},
                            {text: "changeData5", value: 222222},
                            {text: "changeData6", value: 333333}
                        ]};
                };
                vm.changeData2 = function() {
                    vm.data = {E: [
                            {text: "changeData11", value: 111111},
                            {text: "changeData22", value: 222222},
                            {text: "changeData33", value: 333333}
                        ], F: [
                            {text: "changeData44", value: 111111},
                            {text: "changeData55", value: 222222},
                            {text: "changeData66", value: 333333}
                        ]};
                };

            });
        </script>
    </head>
    <body>
        <h3>修正ms-with下面存在ms-repeat时出错的BUG</h3>
        <p><a href="https://github.com/RubyLouvre/avalon/issues/545">https://github.com/RubyLouvre/avalon/issues/545</a></p>
        <div ms-controller="test">
            <button ms-click="changeData1()">changeData1</button>
            <button ms-click="changeData2()">changeData2</button>
            <dl ms-with="data" id="aaa"><dt>{{$key}}</dt>
               <dd ms-repeat="$val">{{el.text}} : {{el.value}}</dd>
            </dl>
        </div>

    </body>
</html>